import * as React from 'react';

// import { RootState, AppDispatch } from '@/app/store';
// import Slider from '../slider/index';
import { useLocation } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';

import './index.module.scss';
import { Dialog } from 'antd-mobile';
import IconHomeActive from './icon/icon-home-active.svg';
import IconHome from './icon/icon-home.svg';
import IconMine from './icon/icon-mine.svg';
import IconMineActive from './icon/icon-mine-active.svg';
import IconOrder from './icon/icon-order.svg';
import IconOrderActive from './icon/icon-order-active.svg';
import IconService from './icon/icon-service.svg';
import IconServiceActive from './icon/icon-service-active.svg';
import { getToken } from '../../utils/localStorge';
const { memo, useMemo, useState, useEffect, useReducer } = React;

interface BottomProps {}
function Bottom(props: BottomProps) {
  const token = getToken();
  const location = useLocation();
  const [homeStatus, setHomeStatus] = useState(true);
  const [orderStatus, setOrderStatus] = useState(false);
  const [serviceStatus, setServiceStatus] = useState(false);
  const [mineStatus, setMineStatus] = useState(false);
  const navigate = useNavigate();
  const handerclick = (val: any) => {
    // onLogin();
    if (val == location.pathname) {
      return;
    } else {
      navigate(val);
    }
  };
  const onLogin = () => {
    if (!token) {
      Dialog.confirm({
        content: '你还没有登录，是否前往登录？',
        onConfirm: async () => {
          navigate('/login');
        },
      });
      return;
    }
  };
  useEffect(() => {
    // onLogin();
    if (location.pathname == '/') {
      setHomeStatus(true);
      setOrderStatus(false);
      setServiceStatus(false);
      setMineStatus(false);
    } else if (location.pathname == '/orderList') {
      setHomeStatus(false);
      setOrderStatus(true);
      setServiceStatus(false);
      setMineStatus(false);
    } else if (location.pathname == '/chat') {
      setHomeStatus(false);
      setOrderStatus(false);
      setServiceStatus(true);
      setMineStatus(false);
    } else if (location.pathname == '/user') {
      setHomeStatus(false);
      setOrderStatus(false);
      setServiceStatus(false);
      setMineStatus(true);
    }
  }, [location.pathname]);

  return (
    <div styleName="bottom-filters">
      <span styleName="item" onClick={() => handerclick('/')}>
        {homeStatus ? <IconHomeActive /> : <IconHome />}
      </span>
      <span styleName="item" onClick={() => handerclick('/orderList')}>
        {orderStatus ? <IconOrderActive /> : <IconOrder />}
      </span>
      <span styleName="item" onClick={() => handerclick('/chat')}>
        {serviceStatus ? <IconServiceActive /> : <IconService />}
      </span>
      <span styleName="item" onClick={() => handerclick('/user')}>
        {mineStatus ? <IconMineActive /> : <IconMine />}
      </span>
    </div>
  );
}
export default memo(Bottom);
